<template>
  <div class="sendingRecords">
    <el-table
      :data="tableDataList"
      ref="customerMgtList"
    >
      <el-table-column
        :label="item.label"
        align="center"
        v-for="(item, index) in tableColumns"
        :key="index"
        :prop="item.key"
        :min-width="item.minWidth ? item.minWidth : ``"
        :fixed="item.fixed ? item.fixed : false"
        :show-overflow-tooltip="true"
      >
        <!--用于表格自定义-->
        <template slot-scope="scope">
          <div v-if="item.key=='name'">
            <div class="userInfo">
              <img src="../../../assets/images/profile.jpg"/>
              <div class="name">小城红</div>
              <div class="label">@志新</div>
            </div>
          </div>
          <div v-else>{{ scope.row[item.key] }}</div>
        </template>
      </el-table-column>
    </el-table>
    <pagination
      v-show="total>0"
      :total="total"
      :page.sync="queryParams.pageNum"
      :limit.sync="queryParams.pageSize"
      @pagination="getList"
    />
  </div>
</template>
<script>
import {listUser} from "@/api/system/user";

export default {
  name: "sendingRecords",
  data(){
    return{
      queryParams: {
        pageNum: 1,
        pageSize: 10,
        id: null,//用户id
        userName1: null,

      },
      tableHeight:600,
      tableColumns: [
        {key: 'name', label: `客户名`, visible: true, minWidth: 150, fixed: true},
        {key: 'mobile', label: `推送企业号`, visible: true, minWidth: 150, fixed: false},
        {key: 'email', label: `推送时间`, visible: true, minWidth: 200},
        {key: 'last_login_time', label: `触达情况`, visible: true, minWidth: 200},
        {key: 'create_time', label: `完成目标情况`, visible: true, minWidth: 200},
      ],
      tableDataList: [],
      total: 8, // 表格的总条数
    }
  },
  created() {
   // this.getList();
    this.tableDataList=[];
    for (let i=0; i<2;i++){
      let obj={
        name:'小红',
        mobile:'18207418337',
        email:'2572513931@qq.com',
        last_login_time:'锐行科技',
        create_time:'2012-02-12',
        check_payCreate_time:'一般',
        check_payStatus_name:'核心',
        account_infoStatus_name:'2012-09-13',
        all_num:'微信',
        open_num:'一般',
        check_num:'2012-09-12',
        waiting_coin:'2012-08-23',
        operate:true,
      }
      this.tableDataList.push(obj);
    }
  },
  methods: {
    showLabel() {
      this.showSelectLabelPage = true;
    },
    /** 查询用户列表 */
    getList() {
      this.loading = true;
      listUser(this.addDateRange(this.queryParams, this.dateRange)).then(response => {
          this.userList = response.rows;
          this.total = response.total;
          this.loading = false;
        }
      );
    },
    /** 搜索按钮操作 */
    handleQuery() {
      this.queryParams.pageNum = 1;
      this.getList();
    },
  }
}
</script>



<style scoped lang="scss">
.userInfo {
  border-radius: 4px;
  margin: 8px 0;
  cursor: pointer;
  position: relative;
  padding-left: 50px;
  font-size: 14px;
  list-style: none;
  text-align: left;
  img {
    width: 40px;
    height: 40px;
    border-radius: 8px;
    left: 0px;
    top: 0px;
    position: absolute;
  }

  .label {
    margin-top: 2px;
    font-size: 12px;
    font-family: PingFangSC-Regular, PingFang SC;
    font-weight: 400;
    color: #f90;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
  }
  .user-big {
    display: flex;
    flex-direction: column;
    line-height: 18px;
  }
}
.sendingRecords {
  background: #fff;
}
</style>
